import { View } from '@tarojs/components';
import DouBottom from './components/dou-bottom';
import { useEffect, useState } from 'react';
import DouCreate from './components/dou-create';
import DouWorks from './components/dou-works';
import request from '@/utils/request';
import { getUser } from '@/utils/user';

export interface IWork {
  id: string;
  name: string;
  url: string;
  status: string;
  userId: string;
  createTime: string;
  updateTime: string;
}

export interface ITextWork {
  id: string;
  userId: string;
  status: string;
  shareLink: string;
  text: string;
  createTime: string;
  updateTime: string;
}

export interface IVideo {
  createTime: string;
  id: string;
  name: string;
  pic: string;
  updateTime: string;
  url: string;
  userId: string;
}

export interface IVoice {
  id: string;
  userId: string;
  name: string;
  url: string;
  voiceId: string;
  status: string;
  createTime: string;
  updateTime: string;
}

export default function Index() {
  const user = getUser();

  const [tabbarValue, setTabbarValue] = useState(0);
  const [worksList, setWorksList] = useState<ITextWork[]>([]);
  const onTabbarChange = (index: number) => {
    setTabbarValue(index);
  };

  useEffect(() => {
    requestForWorks();

    const interval = setInterval(() => {
      requestForWorks();
    }, 10000);

    return () => clearInterval(interval);
  }, []);

  const requestForWorks = async () => {
    const res = await request.get<ITextWork[]>('/work/query/text-work', {
      userId: user.id,
    });
    console.log('res', res);
    setWorksList(res);
  };

  const renderContent = () => {
    switch (tabbarValue) {
      case 0:
        return <DouCreate onTabbarChange={onTabbarChange} />;
      case 1:
        return (
          <DouWorks onTabbarChange={onTabbarChange} worksList={worksList} />
        );
    }
  };
  return (
    <View className="dou-share-to-video">
      {renderContent()}
      <DouBottom value={tabbarValue} onChange={onTabbarChange} />
    </View>
  );
}
